<template>
  <div class="list-wrap">
    <a-form class="search-form" :form="form">
      <a-row :gutter="gutter">
        <a-col :lg="7" :xl="6" :xxl="4">
          <a-form-item label="提现类型">
            <a-input-group class="query-item" compact>
              <a-select style="width: 100%" v-model="withdrawType">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">余额</a-select-option>
                <a-select-option value="2">保证金</a-select-option>
              </a-select>
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="7" :xl="6" :xxl="4">
          <a-form-item label="审核状态">
            <a-input-group class="query-item" compact>
              <a-select style="width: 100%" v-model="selectStatus">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">未审核</a-select-option>
                <a-select-option value="2">已审核</a-select-option>
                <a-select-option value="3">已拒绝</a-select-option>
              </a-select>
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="10" :xl="12" :xxl="8">
          <a-form-item label>
            <a-input-group class="query-item" compact>
              <a-select style="width: 40%" v-model="defaultSearch">
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">服务商ID</a-select-option>
                <a-select-option value="2">服务商姓名</a-select-option>
                <a-select-option value="3">服务商手机号</a-select-option>
                <a-select-option value="4">流水号</a-select-option>
              </a-select>
              <a-input style="width: 60%" placeholder="请输入查询条件" v-model="keyword"/>
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="12" :xl="10" :xxl="8">
          <a-form-item label="发起时间">
            <a-range-picker
              :placeholder="['开始时间', '结束时间']"
              @change="getCreateTime"
              v-model="createTime"
              class="select-range-time"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :lg="10" :xl="8" :xxl="6">
          <div class="top-btns">
            <a-button @click="searchPtwithdraw" type="primary">查询</a-button>
            <a-button type="primary" v-if="isBatchAudit">审核</a-button>
            <a-button @click="resetList">重置</a-button>
            <a-button type="primary" @click="exportPop"><a-icon type="download" />导出</a-button>
          </div>
        </a-col>
      </a-row>
    </a-form>
    <div class="search-result-list">
      <a-table
        :columns="columns"
        :dataSource="providerCashData"
        rowKey="id"
        :loading="loading"
        :pagination="pagination"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        :scroll="scrollX"
      >
        <span slot="action" slot-scope="text, item" class="action-wrap">
          <a @click="viewDetail(item)">查看详情</a>
          <a @click="() => hander(item, 1)">审核</a>
          <a @click="() => hander(item, 2)">拒绝</a>
        </span>
      </a-table>
      <span class="selected-item">{{`选中 ${selectedRowKeys.length} 条`}}</span>
      <pagination
        :total="total"
        @loadDataList="initPageList"
        ref="pageBand"
      />
    </div>
    <div class="modal-wrap">
      <!-- <a-modal
        :title="auditTitle==1?'通过审核':'拒绝审核'"
        v-model="visible"
        @ok="handleAuditOk"
        :maskClosable="maskClosable"
        okText="确认"
        cancelText="取消"
        class="audit-pop"
      >
        <p>请确认是否{{auditTitle==1?'通过审核':'拒绝审核'}}</p>
        <a-textarea placeholder="请输入备注信息" :rows="4" v-model="remarkTxt" maxlength="60"/>
      </a-modal>-->
      <remarks
        :title="auditTitle==1?'通过审核':'拒绝审核'"
        :isRefuse="auditTitle"
        :hint="`请确认是否${auditTitle==1?'通过审核':'拒绝审核'}?`"
        ref="remarks"
        @remarksConfirm="handleAuditOk"
      />
      <!-- 导出弹窗 -->
      <export-list ref="exportBand" exportApi="partnerWithdraw"/>
    </div>
  </div>
</template>
<script>
import { ptwithdraw, updatePtwithdraw } from '../../store/providerApi.js'
import { mixin } from '../../utils/remaksMixin'
export default {
  mixins: [mixin],
  data() {
    return {
      form: this.$form.createForm(this),
      gutter: {
        xs: 8,
        sm: 16,
        md: 16,
        lg: 24,
        xl: 24,
        xxl: 48
      },
      columns: [
        {
          dataIndex: 'index',
          title: '序号',
          fixed: 'left',
          width: 60
        },
        {
          title: '服务商id',
          dataIndex: 'partner_id'
        },
        {
          title: '服务商姓名',
          dataIndex: 'partner_name'
        },
        {
          title: '服务商手机号',
          dataIndex: 'phone'
        },
        {
          title: '流水号',
          dataIndex: 'order_no'
        },
        {
          title: '提现类型',
          dataIndex: 'type',
          customRender(type) {
            if (type == 1) {
              return '余额'
            } else if (type == 2) {
              return '保证金'
            }
          }
        },
        {
          title: '提现金额(元)',
          dataIndex: 'amount'
        },
        {
          title: '手续费(元)',
          dataIndex: 'fee'
        },
        {
          title: '到账金额(元)',
          dataIndex: 'actual_amount'
        },
        {
          title: '持卡人姓名',
          dataIndex: 'card_user'
        },
        {
          title: '银行名称',
          dataIndex: 'bankname'
        },
        {
          title: '银行卡号',
          dataIndex: 'bankcard'
        },
        {
          title: '审核状态',
          dataIndex: 'status',
          customRender(status) {
            if (status == 0) {
              return '未审核'
            } else if (status == 1) {
              return '已审核'
            } else if (status == 2) {
              return '已拒绝'
            }
          }
        },
        {
          title: '发起时间',
          dataIndex: 'created_at'
        },
        {
          title: '处理时间',
          dataIndex: 'processed_at'
        },
        {
          title: '操作人',
          dataIndex: 'admin'
        },
        {
          title: '备注',
          dataIndex: 'remark',
          width: 100,
          // 在备注中插入新标签控制长度
          customRender: (text, row, index) => {
            return {
              children: (
                <div class="col-sql" title={text}>
                  {text}
                </div>
              ),
              attrs: {}
            }
          }
        },
        {
          title: '操作',
          fixed: 'right',
          width: 200,
          scopedSlots: { customRender: 'action' }
        }
      ],
      providerCashData: [], // 表格数据
      loading: false,
      pagination: false,
      scrollX: {},
      total: 0,
      selectedRowKeys: [], // 表格多选框选中项
      auditTitle: '', // 弹窗头部标题
      maskClosable: false, // 点击遮罩层不让弹窗消失
      remarkTxt: '', // 弹窗的备注信息
      start_time: 0,
      end_time: 0,
      createTime: [], // 选择的时间段默认为空
      selectStatus: '0', // 筛选的审核状态
      defaultSearch: '0', // 筛选的查询条件
      keyword: '', // 查询条件下的关键字
      isBatchAudit: false,  // 批量审核按钮是否显示
      withdrawType: '0' // 提现类型
    }
  },
  methods: {
    // 查询按钮方法
    searchPtwithdraw() {
      this.$refs.pageBand.getData()
    },
    // 重置按钮方法
    resetList() {
      this.verifyType = '0'
      this.selectStatus = '0'
      this.createTime = []
      this.start_time = 0
      this.end_time = 0
      this.defaultSearch = '0'
      this.keyword = ''
      this.withdrawType = '0'
      this.$refs.pageBand.getData()
    },
    // 筛选加表格数据显示
    initPageList(info) {
      this.loading = true
      ptwithdraw({
        verifyType: this.selectStatus, // 审核状态 0全部 1 未处理 2 已审核 3已拒绝
        startTime: this.start_time,
        endTime: this.end_time,
        searchType: this.defaultSearch,
        withdrawType: this.withdrawType,
        name: this.keyword,
        page: info.page,
        num: info.pageSize
      }).then(res => {
        this.loading = false
        var array = res.data.list
        for (let i = 0; i < array.length; i++) {
          array[i]['index'] = (info.page - 1) * info.pageSize + (i + 1)
        }
        this.providerCashData = array
        // 出现滚轮的条件
        if (res.data.list.length > 0) {
          this.scrollX = { x: 2500 }
        } else {
          this.scrollX = {}
        }
        // 分页器总页数
        this.total = res.data.total_num
      })
    },
    // 选择的时间段转化为时间轴
    getCreateTime(date, str) {
      if (str[0] && str[1]) {
        this.start_time = new Date(str[0] + ' 00:00:00').getTime() / 1000
        this.end_time = new Date(str[1] + ' 23:59:59').getTime() / 1000
      } else {
        this.start_time = 0
        this.end_time = 0
      }
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
      if (selectedRowKeys && selectedRowKeys.length > 0) {
        this.isBatchAudit = true
      } else {
        this.isBatchAudit = false
      }
      console.log('已选:', selectedRowKeys)
    },
    // 审核和拒绝审核操作
    hander(item, title) {
      if (Number(item.status) === 0) {
        this.auditTitle = title
        this.editingItem = item
        this.openRemaks()
      } else {
        this.$message.warning('该记录已审核，无法重复操作！')
      }
    },
    // 审核弹窗的确认按钮
    handleAuditOk({ remarks }) {
      var data = {
        status: this.auditTitle,
        id: this.editingItem.uuid
      }
      if (remarks) {
        data.memo = remarks
      }
      updatePtwithdraw(data).then(e => {
        this.$message.success(e.data.message)
        // this.initPageList()
        this.$refs.pageBand.getEvent()
      })
    },
    // 导出按钮弹出弹窗
    exportPop () {
      this.$refs.exportBand.openPop()
    },
    // 详情页的跳转
    viewDetail(item) {
      this.$router.push({
        path: '/menu/provider/cashWithdrawal/detail',
        query: { id: item.uuid }
      })
    }
  }
}
</script>
<style>
</style>
